.cart {
  padding: 20px;
  background: linear-gradient(135deg, #FFF5F7, #FFE8F0);
  min-height: 100vh;
  
  .empty-cart {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 400px;
    
    .empty-text {
      font-size: 32px;
      color: #999;
      margin-bottom: 30px;
    }
    
    .go-shopping-btn {
      width: 60%;
      height: 80px;
      line-height: 80px;
      background: linear-gradient(135deg, #FFB6C1, #FFC0CB);
      color: white;
      font-size: 30px;
      border-radius: 40px;
      border: none;
      box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 182, 193, 0.4);
      }
    }
  }
  
  .cart-items {
    height: calc(100vh - 500px);
    margin-bottom: 16px;
    
    .cart-item {
      background: white;
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: 0 4px 12px rgba(255, 182, 193, 0.15);
      border: 2px solid rgba(255, 182, 193, 0.2);
      transition: all 0.3s ease;
      
      &:hover {
        box-shadow: 0 8px 24px rgba(255, 182, 193, 0.2);
        transform: translateY(-2px);
      }
      
      .item-info {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        
        .item-name {
          font-size: 30px;
          color: #4A4A4A;
          flex: 1;
        }
        
        .item-price {
          font-size: 30px;
          color: #FFB6C1;
          font-weight: bold;
        }
      }
      
      .item-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
        
        .quantity-control {
          display: flex;
          align-items: center;
          
          .quantity-btn {
            width: 60px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            color: #4A4A4A;
            background: #FFF5F7;
            border: 2px solid #FFB6C1;
            border-radius: 30px;
            padding: 0;
            transition: all 0.3s ease;
            
            &.minus {
              color: #999;
            }
            
            &.plus {
              color: #FFB6C1;
            }
            
            &:hover {
              background: #FFE8F0;
              transform: scale(1.05);
            }
          }
          
          .quantity {
            font-size: 30px;
            color: #4A4A4A;
            width: 80px;
            text-align: center;
          }
        }
        
        .remove-btn {
          color: #FF6B9D;
          font-size: 24px;
          padding: 8px 16px;
          border-radius: 12px;
          background: rgba(255, 107, 157, 0.1);
          transition: all 0.3s ease;
          
          &:hover {
            background: rgba(255, 107, 157, 0.2);
            transform: scale(1.05);
          }
        }
      }
      
      .item-total {
        font-size: 28px;
        color: #FFB6C1;
        font-weight: bold;
        text-align: right;
      }
    }
  }
  
  .note-section {
    margin-bottom: 20px;
    
    .note-label {
      display: block;
      font-size: 28px;
      color: #4A4A4A;
      margin-bottom: 12px;
      font-weight: 600;
    }
    
    .note-input {
      width: 100%;
      padding: 16px;
      border: 2px solid #FFB6C1;
      border-radius: 16px;
      font-size: 28px;
      color: #4A4A4A;
      background: white;
      transition: all 0.3s ease;
      
      &:focus {
        outline: none;
        border-color: #FFC0CB;
        box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.1);
      }
    }
  }
  
  .clear-cart {
    margin-bottom: 20px;
    
    .clear-btn {
      width: 100%;
      height: 80px;
      line-height: 80px;
      background: rgba(255, 107, 157, 0.1);
      color: #FF6B9D;
      font-size: 28px;
      border: 2px solid #FF6B9D;
      border-radius: 40px;
      transition: all 0.3s ease;
      
      &:hover {
        background: rgba(255, 107, 157, 0.2);
        transform: translateY(-2px);
      }
    }
  }
  
  .points-section {
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 16px;
    border: 2px solid rgba(255, 182, 193, 0.3);
    box-shadow: 0 4px 12px rgba(255, 182, 193, 0.15);
    
    .points-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      
      .points-title {
        font-size: 28px;
        color: #4A4A4A;
        font-weight: 600;
      }
      
      .points-available {
        font-size: 24px;
        color: #FFB6C1;
        font-weight: bold;
      }
    }
    
    .points-active {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background: rgba(255, 182, 193, 0.1);
      border-radius: 12px;
      border: 2px solid #FFB6C1;
      
      .points-info {
        .points-value {
          display: block;
          font-size: 28px;
          color: #FFB6C1;
          font-weight: bold;
        }
        
        .points-discount {
          display: block;
          font-size: 24px;
          color: #666;
        }
      }
      
      .points-actions {
        display: flex;
        gap: 16px;
        
        .adjust-link,
        .cancel-link {
          color: #FFB6C1;
          font-size: 24px;
          padding: 8px 16px;
          border-radius: 12px;
          background: rgba(255, 182, 193, 0.1);
          transition: all 0.3s ease;
          
          &:hover {
            background: rgba(255, 182, 193, 0.2);
            transform: scale(1.05);
          }
        }
      }
    }
    
    .use-points-button {
      width: 100%;
      height: 80px;
      line-height: 80px;
      background: linear-gradient(135deg, #FFB6C1, #FFC0CB);
      color: white;
      font-size: 28px;
      border: none;
      border-radius: 40px;
      box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
      transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 182, 193, 0.4);
      }
      
      &:disabled {
        opacity: 0.6;
        background: #ccc;
      }
    }
  }
  
  .checkout-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    padding: 20px;
    border-top: 2px solid #FFB6C1;
    box-shadow: 0 -4px 12px rgba(255, 182, 193, 0.15);
    
    .price-summary {
      margin-bottom: 20px;
      
      .price-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        
        .price-label {
          font-size: 28px;
          color: #4A4A4A;
        }
        
        .price-value {
          font-size: 28px;
          color: #4A4A4A;
          font-weight: bold;
        }
        
        &.discount {
          .price-value {
            color: #FFB6C1;
          }
        }
        
        &.total {
          border-top: 2px solid #FFB6C1;
          padding-top: 8px;
          margin-top: 8px;
          
          .price-label {
            font-size: 32px;
            font-weight: bold;
          }
          
          .price-value {
            font-size: 32px;
            color: #FFB6C1;
            font-weight: bold;
          }
        }
      }
    }
    
    .checkout-button {
      width: 100%;
      height: 88px;
      line-height: 88px;
      background: linear-gradient(135deg, #FFB6C1, #FFC0CB);
      color: white;
      font-size: 32px;
      font-weight: bold;
      border: none;
      border-radius: 44px;
      box-shadow: 0 4px 12px rgba(255, 182, 193, 0.3);
      transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(255, 182, 193, 0.4);
      }
      
      &:disabled {
        opacity: 0.6;
        background: #ccc;
      }
    }
  }
  
  .offline-warning {
    position: fixed;
    bottom: 120px;
    left: 20px;
    right: 20px;
    background: rgba(255, 107, 157, 0.9);
    color: white;
    padding: 16px;
    border-radius: 16px;
    text-align: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
  }
} 